const { default: classNames } = require('classnames')
const _ = require('../utils')
const { listItemBehavior, listParentBehavior } = require('../behaviors')

_.create('cell', {
  options: {
    multipleSlots: true,
  },

  properties: {
    image: String,
    icon: String,
    title: String,
    clickable: Boolean,
    hasArrow: Boolean,
    disabled: Boolean,
  },

  behaviors: [listItemBehavior],

  relations: {
    listParent: {
      // type: 'ancestor',
      type: 'parent',
      target: listParentBehavior,
    },
  },

  computed: {
    classes(data) {
      const { classPrefix, isLast, disabled, bordered, hasArrow } = data
      const classes = classNames(classPrefix, {
        [`${classPrefix}-last`]: isLast,
        [`${classPrefix}-bordered`]: bordered,
        [`${classPrefix}-disabled`]: disabled,
        [`${classPrefix}-has-arrow`]: hasArrow,
      })

      return classes
    },

    hoverClass(data) {
      const { classPrefix, clickable, disabled } = data
      return clickable && !disabled ? `${classPrefix}-hover` : ''
    },
  },

  methods: {
    onTap(e) {
      if (!this.data.clickable || this.data.disabled) return
      this.triggerEvent('tap', e.detail)
    },
  },
})
